
import { ErrorMessage, Field, Form, Formik, useField, useFormik } from "formik"
import * as Yup from "yup"
function MyInput({label,...props}){
  const [field,meat] = useField(props);
  return <div>
    <label htmlFor="props.id">{label}</label>
    <input {...field} {...props}/>
    {meat.touched && meat.error?<span>{meat.error}</span>:null}
  </div>
}
function Checkbox({label,...props}){
  const [field,meat,helper] = useField(props);
  let {value} = meat
  let {setValue} = helper
  const handleChange = values=>{
    const set = new Set(value)
    console.log(props.value)
    if(set.has(props.value)){
      set.delete(props.value)
    }else{
      set.add(props.value)
    }
    setValue([...set])
  }
  return <div>
    <label>
       <input checked={value.includes(props.value)} type="checkbox" {...props} onChange={handleChange}/>{label}
    </label>
  </div>

}
function App() {
  // const formik = useFormik({
  //   initialValues: { username: "", password: "" },
  //   // validate:values=>{
  //   //    const errors = {}
  //   //    if(!values.username){
  //   //     errors.username = "请输入用户名"
  //   //    }else if(values.username.length>15){
  //   //     errors.username = "用户名的长度不能大于15"
  //   //    }
  //   //    if(!values.password){
  //   //     errors.password = "请输入密码"
  //   //    }else if(values.password.length<6){
  //   //     errors.password = "密码不能小于6"
  //   //    }
  //   //    return errors
  //   // },
  //   validationSchema:Yup.object().shape({
  //     username:Yup.string().max(15,"用户名的长度不能大于15").required("请输入用户名"),
  //     password:Yup.string().min(6,"密码不能小于6").required("请输入用户名密码")
  //   }),
  //   onSubmit: values => {
  //     console.log(values)
  //   }
  // })
  const initialValues = {username:"",hobbies:["排球"]}
  const schema = Yup.object({
    username:Yup.string().max(15,"用户名不能超过15").required("请输入用户名"),
    password:Yup.string().min(6,"密码不能少于6").required("请输入用户名密码")
  })
  const handleSubmit = values=>{
    console.log(values)
  }
  return (
    // <form onSubmit={formik.handleSubmit}>
    //   <input type="text" name="username" 
    //   {...formik.getFieldProps("username")}
    //   />
    //   <p>{formik.touched.username && formik.errors.username?formik.errors.username:null}</p>
    //   <input type="password" name="password" 
    //    {...formik.getFieldProps("password")}
    //   />
    //    <p>{formik.touched.password && formik.errors.password?formik.errors.password:null}</p>
    //   <input type="submit"/>
    // </form>
   
    <Formik initialValues={initialValues} validationSchema={schema} onSubmit={handleSubmit}>
      <Form>
        <Field name="username"></Field>
        <ErrorMessage name="username"></ErrorMessage>
       
        <MyInput id="myPass" label="密码" type="password" name="password" placeholder="请输入密码"/>
        <Checkbox value="足球" label="足球" name="hobbies"/>
        <Checkbox value="篮球" label="篮球" name="hobbies"/>
        <Checkbox value="排球" label="排球" name="hobbies"/>
        <input type="submit" />
      </Form>
    </Formik>
  );
}

export default App;
